<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align: center;
            padding-top: 20vh;
        }
        .stringList{
            text-align: left;
            display: none;
        }
        .stringList p{
            border-bottom: 1px black solid;
        }
        .stringList p:hover{
            cursor: pointer;
            background: antiquewhite;
        }
    </style>
</head>
<body>
<label>
    <input type="text" class="inputText" id="inputText">
    <div id="stringList" class="stringList">
        <!-- 这里将显示字符串列表 -->
    </div>
</label>

</body>
<script>
    const region = '武汉';
    const location2 = '30.44327,114.274241';
    const text = document.getElementById('inputText');
    const stringList = document.getElementById('stringList');
    text.addEventListener('input', function(event) {
        stringList.style.display="block";
        stringList.innerText='';
        const inputContent = event.target.value;
        postData(inputContent);
    });

    function postData(keyword) {
        const data = new URLSearchParams();
        data.append('keyword', keyword);
        data.append('region', region);
        data.append('location', location2);
        console.log(keyword)
        fetch('/locationSearch', {
            method: 'POST',
            body: data,
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json(); // 解析 JSON 数据
            })
            .then(data => {
                // 数据从后端获取，存储在 data 中
                // console.log('Response:', data);
                data.forEach(str => {
                    const listItem = document.createElement('p');
                    listItem.textContent = str.name+'————'+str.address;
                    listItem.classList.add('stringItem');

                    listItem.addEventListener('click', () => {
                        text.value = str.name; // 点击时将点击的字符串设置为输入框的值
                        stringList.style.display="none";
                    });

                    stringList.appendChild(listItem);
                });
            })
            .catch(error => {
                console.error('Error:', error);
                // 处理错误
            });
    }

</script>
</html>